<template>
	<!-- 头部导航栏 -->
	<view style="border-bottom: solid 1rpx #eee;display: flex;justify-content: space-between;align-items: center;padding: 28rpx 20rpx;position:fixed;top:0;left:0;right:0;height: 60px;z-index: 22;background-color: white;">
			<view style="display: flex;position: absolute;z-index: 32;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
		
			<view style="font-weight: bold;position: absolute;left: 0;right: 0;height: 100%;display: flex;align-items: center;justify-content: center;">
				<view style="margin-left: 10rpx;">
					发表预览
				</view>
			</view>
		
<!-- 		<view @click="showComfirmModal=true" style="display: flex;align-items: center;;padding: 10rpx 25rpx;margin: 0 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
			<view  style="margin-left: 10rpx;">
				开始发布
			</view>
		</view> -->
	</view>
	
	<view v-if="post" style="margin: 0 0rpx;box-sizing: border-box;padding-top: 60px;">
		
		<view style="padding: 20px;">
			<view style="font-weight: bold;font-size: 16px;">{{post.title}}</view>
			<view style="padding-top: 10px;display: flex;align-items: center;">
				<view style="font-weight: bold;color: #888;">掌聘Job</view>
				<view style="margin-left: 10px;color: #999;"> 2023-10-21 15:04</view>
			</view>
		</view>	
		
		<view  style="height: 150px;overflow: hidden;display: flex;align-items: center;position: relative;">
			<image style="width: 100%;" mode="widthFix" :src="absUrl(post.thumb_url)"></image>
		</view>
		
		<mp-html :content="html" :tag-style="{boxSizing:'border-box'}" style="box-sizing: border-box;" />
		<!-- <web-view :webview-styles="{with:'100%'}" fullscreen src="http://www.apesk.net/api/common/wx/get_published"></web-view> -->
	</view>
	
	<u-modal 
		:show="showComfirmModal" 
		title="发布确认" 
		content="是否发布?" 
		cancel-text="取消" 
		show-cancel-button 
		@cancel="showComfirmModal=false"
		@confirm="onPublish"
	></u-modal>
	
</template>

<script>
	export default {
		computed:{
			
		},
		async onLoad(options){
			console.log(options.post_id)
			//this.html2 = await this.$http.get('/common/wx/get_published')
			// let res = this.$localStorage.getItem('published')
			
			// if(!res)
			// {
			// 	res = await this.$http.get('/common/wx/get_published')
				
			// 	this.$localStorage.setItem('published',res)
			// }
			
			// this.html = res
			
			// this.html = await this.$http.get('/common/wx/render')
			
			let res = await this.$http.get('/common/wx/post',{
				params:{
					id:options.post_id
				}
			})
			 
			this.html = res.data.html
			this.post = res.data
			console.log(this.post)
			
		},
		data() {
			return {
				post:null,
				html:`
				<div style="padding: 0.625rem;display: flex;flex-wrap: wrap;">
				  <div style="margin-top: 0.3125rem;margin-right: 0.3125rem;padding: 5px 8px;background-color: rgb(255, 140, 0);border-radius: 0.3125rem;color: white;">#顺德陈村
				  </div>
				  <div style="margin-top: 0.3125rem;margin-right: 0.3125rem;padding: 5px 8px;background-color: rgb(238, 238, 238);border-radius: 0.3125rem;">#顺德北滘
				  </div>
				  <div style="margin-top: 0.3125rem;margin-right: 0.3125rem;padding: 5px 8px;background-color: rgb(238, 238, 238);border-radius: 0.3125rem;">#顺德勒流
				  </div>
				  <div style="margin-top: 0.3125rem;margin-right: 0.3125rem;padding: 5px 8px;background-color: rgb(238, 238, 238);border-radius: 0.3125rem;">#广州天河
				  </div>
				  <div style="margin-top: 0.3125rem;margin-right: 0.3125rem;padding: 5px 8px;background-color: rgb(238, 238, 238);border-radius: 0.3125rem;">#江门四会
				  </div>
				  <div style="margin-top: 0.3125rem;margin-right: 0.3125rem;padding: 5px 8px;background-color: rgb(238, 238, 238);border-radius: 0.3125rem;">#东莞大都
				  </div>
				</div>
				<div style="display: flex;flex-direction: column;">
				  <div style="border-radius: 0.46875rem;box-shadow: rgba(136, 136, 136, 0.333) 0px 0px 14px 0px;margin: 0.625rem;">
					<div style="display: flex;justify-content: space-between;padding: 0.9375rem 0.625rem 0px;">
					  <div style="font-weight: bold;font-size: 18px;align-items: center;">顺德喜来登酒店
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;">
						<uni-text style="font-size: 12px;">详情报名&gt;&gt;
						</uni-text>
					  </div>
					</div>
					<div style="display: flex;justify-content: space-between;padding: 0.9375rem 0.625rem 0px;">
					  <div style="font-size: 13px;align-items: center;">2023-10-29 周四
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;">
						<uni-text style="font-size: 20px;color: orangered;padding: 0px 0.3125rem;">16
						</uni-text>
						<uni-text style="font-size: 12px;">元/小时
						</uni-text>
					  </div>
					</div>
					<div style="display: flex;justify-content: space-between;padding: 0.625rem 0.625rem 0px;">
					  <div style="color: rgb(136, 136, 136);font-size: 13px;display: flex;align-items: center;">
						<em style="width: 1.09375rem;height: 1.09375rem;margin-right: 0.3125rem;"></em>佛山.顺德 佛山市顺德区大良喜来登酒店16号
					  </div>
					</div>
					<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 0.625rem;">
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">提前30分钟到场
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">提供晚餐
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">要求女生
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">加班补贴
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">节日礼品
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">隔天住宿
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">身高170cm以上
					  </div>
					</div>
					<div style="display: flex;padding: 0px 0.625rem 0.625rem;">
					  <div style="width: 100%;color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">有意向的同学,立即添加微信,长期做的有更多福利
						<br>微信号: xiaoyan265478 飞机勿扰,谢谢!
					  </div>
					</div>
					<div style="padding-bottom: 0.3125rem;">
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size: 14px;">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size: 14px;">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size: 14px;">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					</div>
				  </div>
				</div>
				<div style="display: flex;flex-direction: column;">
				  <div style="border-radius: 0.46875rem;box-shadow: rgba(136, 136, 136, 0.333) 0px 0px 14px 0px;margin: 0.625rem;">
					<div style="display: flex;justify-content: space-between;padding: 0.9375rem 0.625rem 0px;">
					  <div style="font-weight: bold;font-size: 16px;align-items: center;">顺德喜来登酒店
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;">
						<uni-text style="font-size: 12px;">详情报名&gt;&gt;
						</uni-text>
					  </div>
					</div>
					<div style="display: flex;justify-content: space-between;padding: 0.9375rem 0.625rem 0px;">
					  <div style="font-size: 13px;align-items: center;">2023-10-29 周四
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;">
						<uni-text style="font-size: 20px;color: orangered;padding: 0px 0.3125rem;">16
						</uni-text>
						<uni-text style="font-size: 12px;">元/小时
						</uni-text>
					  </div>
					</div>
					<div style="display: flex;justify-content: space-between;padding: 0.625rem 0.625rem 0px;">
					  <div style="color: rgb(136, 136, 136);font-size: 13px;display: flex;align-items: center;">
						<em style="width: 1.09375rem;height: 1.09375rem;margin-right: 0.3125rem;"></em>佛山.顺德 佛山市顺德区大良喜来登酒店16号
					  </div>
					</div>
					<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 0.625rem;">
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">提前30分钟到场
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">提供晚餐
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">要求女生
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">加班补贴
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">节日礼品
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">隔天住宿
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">身高170cm以上
					  </div>
					</div>
					<div style="display: flex;padding: 0px 0.625rem 0.625rem;">
					  <div style="width: 100%;color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">有意向的同学,立即添加微信,长期做的有更多福利
						<br>微信号: xiaoyan265478 飞机勿扰,谢谢!
					  </div>
					</div>
					<div style="padding-bottom: 0.3125rem;">
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size:14px">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size:14px">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size:14px">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					</div>
				  </div>
				</div>
				<div style="display: flex;flex-direction: column;">
				  <div style="border-radius: 0.46875rem;box-shadow: rgba(136, 136, 136, 0.333) 0px 0px 14px 0px;margin: 0.625rem;">
					<div style="display: flex;justify-content: space-between;padding: 0.9375rem 0.625rem 0px;">
					  <div style="font-weight: bold;font-size: 16px;align-items: center;">顺德喜来登酒店
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;">
						<uni-text style="font-size: 12px;">详情报名&gt;&gt;
						</uni-text>
					  </div>
					</div>
					<div style="display: flex;justify-content: space-between;padding: 0.9375rem 0.625rem 0px;">
					  <div style="font-size: 13px;align-items: center;">2023-10-29 周四
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;">
						<uni-text style="font-size: 20px;color: orangered;padding: 0px 0.3125rem;">16
						</uni-text>
						<uni-text style="font-size: 12px;">元/小时
						</uni-text>
					  </div>
					</div>
					<div style="display: flex;justify-content: space-between;padding: 0.625rem 0.625rem 0px;">
					  <div style="color: rgb(136, 136, 136);font-size: 13px;display: flex;align-items: center;">
						<em style="width: 1.09375rem;height: 1.09375rem;margin-right: 0.3125rem;"></em>佛山.顺德 佛山市顺德区大良喜来登酒店16号
					  </div>
					</div>
					<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 0.625rem;">
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">提前30分钟到场
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">提供晚餐
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">要求女生
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">加班补贴
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">节日礼品
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">隔天住宿
					  </div>
					  <div style="color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">身高170cm以上
					  </div>
					</div>
					<div style="display: flex;padding: 0px 0.625rem 0.625rem;">
					  <div style="width: 100%;color: rgb(136, 136, 136);font-size: 13px;background-color: rgb(238, 238, 238);margin: 0.3125rem 0px 0px;padding: 4px 5px;border-radius: 5px;">有意向的同学,立即添加微信,长期做的有更多福利
						<br>微信号: xiaoyan265478 飞机勿扰,谢谢!
					  </div>
					</div>
					<div style="padding-bottom: 0.3125rem;">
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size:14px">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size:14px">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						</div>
					  </div>
					  <div style="padding: 0.625rem;border-top: 0.03125rem solid rgb(238, 238, 238);display: flex;justify-content: space-between;">
						<div style="font-weight: bold;font-size:14px">西餐厅服务员
						</div>
						<div style="font-size:14px">下午13:30-19:30
						  <mpchecktext contenteditable="false" id="1698313021295_0.9352761367967084">
						  </mpchecktext>
						</div>
					  </div>
					</div>
				  </div>
				</div>`,
				showComfirmModal:false,
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			onPublish(){
				console.log('???')
			}
		}
	}
</script>

<style scoped>
	/deep/ div {
		box-sizing: border-box;
	}
</style>
